<template>
  <layout-body>
    <div>
      <el-button
        v-permission="'system-menus-create'"
        type="primary"
        @click="createClick(0)"
      >
        <el-icon><Plus /></el-icon>
        添加菜单
      </el-button>
    </div>
    <!-- 列表 -->
    <el-table
      v-loading="initLoading"
      class="mt20"
      :data="lists"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="菜单名称" prop="menu_name" min-width="200px">
        <template #default="scope">
          <span class="text-grey">{{ scope.row.html }}</span>
          <span>{{ scope.row.menu_name }}</span>
        </template></el-table-column
      >
      <el-table-column label="路由地址" prop="menu_path" min-width="140px">
        <template #default="scope">
          <span>{{ scope.row.menu_path }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Api接口" prop="api_rule" min-width="140px">
        <template #default="scope">
          <span>{{ scope.row.api_rule }}</span>
        </template>
      </el-table-column>
      <el-table-column label="权限标识" prop="menu_node" min-width="140px">
        <template #default="scope">
          <span>{{ scope.row.menu_node }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center" width="120px">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status.value"
            size="small"
            :active-value="1"
            :inactive-value="0"
            :loading="scope.row.loading"
            :before-change="
              () => {
                return (scope.row.switch = true);
              }
            "
            @change="statusChange($event, scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="createClick(scope.row.id)"
            v-permission="'system-menus-update'"
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="不用了"
            icon="WarningFilled"
            icon-color="red"
            title="确定删除吗？"
            @confirm="del(scope.row.id)"
          >
            <template #reference>
              <el-button
                link
                v-permission="'system-menus-delete'"
                type="primary"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加 -->
    <menusCreateComponent
      ref="createComponentRef"
      @success="toInit(true)"
    ></menusCreateComponent>
  </layout-body>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted } from "vue";

import { getList, updateStatus, delMenu } from "@/api/system/menus";
import menusCreateComponent from "./create.vue";
import { useMenus } from "@/store";
import { Result, ResultError } from "@/types";

const MenusStore = useMenus();

const { proxy } = getCurrentInstance() as any;
const {
  proxy: { $message, $utils },
} = getCurrentInstance() as any;

const createComponentRef = ref<HTMLElement>();

const initLoading = ref<boolean>(true);

const lists = ref([]);

const toInit = (initMenu = false) => {
  initLoading.value = true;
  getList({})
    .then((res: Result) => {
      lists.value = res.data.list;
      if (initMenu) {
        MenusStore.initMenus(res.data.menusList);
        MenusStore.setPermissionAction(res.data.action);
      }
      setTimeout(() => {
        initLoading.value = false;
      }, 300);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};
onMounted(() => {
  toInit();
});

const createClick = (id: number | string) => {
  proxy?.$refs["createComponentRef"]?.open(id);
};

const statusChange = (val: any, row: any) => {
  if (row.switch === true) {
    row.loading = true;
    updateStatus({
      id: row.id,
      status: val,
    })
      .then((res: Result) => {
        row.loading = false;
        toInit(true);
        $utils.successMsg(res);
      })
      .catch((err: ResultError) => {
        row.loading = false;
        toInit();
        $utils.errorMsg(err);
      });
  }
};

const del = (id: number) => {
  delMenu({ id })
    .then((res: Result) => {
      toInit(true);
      $utils.successMsg(res.message);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};
</script>
<style scoped>
</style>